import React, { Component } from 'react'
import { Form, Icon, Input, Button , Row,Col, Upload ,message
,Spin
} from 'antd';
import {UPDATEURLIMG} from '../../../api/config/config';
import {saveDevTools} from '../../../api/request/devTools';
@Form.create()
 class Index extends Component {
   constructor(){
     super()
     this.state={
       loading:false
     }
   }
      normFile = e => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
          console.log('object eeeee:', e);
          return e;
        }
        return e && e.fileList;
      };
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            console.log('values :', values);
            const {min_image} = values
            if (!min_image[0].response) {
              message.error('注意图片上传失败了')
              return
            }
            this.setState({
              loading:true
            })
            const data = min_image[0].response.data.filePath
            values.min_image = data
            saveDevTools(values)
            .then(res=>{
              console.log('res :', res);
              message.success(res.msg)
              this.setState({
                loading:false
              })
            })
          
          }
        });
      };

    render() {

        const { getFieldDecorator  } = this.props.form;

        return (
            <>
        <Row >
        <Spin spinning={this.state.loading}>
          <h2> 开发工具  </h2>
        <Col span={12}>
          <Form onSubmit={this.handleSubmit} className="login-form" >
                <Form.Item label="工具名">
                {getFieldDecorator('title', {
                    rules: [{ required: true, message: '请输入作者名!' }],
                })(
                    <Input
                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    placeholder="工具名"
                    />,
                )}
                </Form.Item>
                <Form.Item label="网址">
                {getFieldDecorator('item_href', {
                    rules: [{ required: true, message: '请输入作者名!' }],
                })(
                    <Input
                    prefix={<Icon  style={{ color: 'rgba(0,0,0,.25)' }} />}
                    placeholder="网址"
                    />,
                )}
                </Form.Item>
                <Form.Item label="缩略图" extra="">
                  {getFieldDecorator('min_image', {
                    valuePropName: 'fileList',
                    getValueFromEvent: this.normFile,
                  })(
                    <Upload name="file" action={UPDATEURLIMG} listType="picture">
                      <Button>
                        <Icon type="upload" /> 头像上传
                      </Button>
                    </Upload>,
                  )}
                </Form.Item>

                <Form.Item label="点评">
                   {getFieldDecorator('intro' ,{rules: [{ required: true, message: '请输入评价' }]})(
                      <Input.TextArea
                  
                      autoSize={{ minRows: 2, maxRows: 6 }}></Input.TextArea>
                   )}
                </Form.Item>
                <Form.Item>
                <Button type="primary"  onClick={()=>{this.props.form.resetFields()}} className="login-form-button">
                   重置
                </Button>
                <Button type="primary" style={{marginLeft:8}} htmlType="submit" className="login-form-button">
                   保存
                </Button>
                </Form.Item>
          </Form>
          </Col>
          </Spin>
        </Row>
            </>
        )
    }
}
export default Index